<template>
	<ul class="list">
		<li class="item" 
		v-for ="item of letters" 
		:key="item" 
		:ref="item"
		@touchstart="handleLeTouchStart"
		@touchmove="handleLetTouMove"
		@touchend="handleLeTouchEnd"
		@click="handleLetterClick"
		>
		{{item}}
		</li>
	</ul>
</template>

<script >
	export default {
		name:'CityAlphabet',
		props:{
			cities:Object
		},
		computed:{
			letters() {
				const letters = []
				for(let i in this.cities){
					letters.push(i)
				}
				return letters
			}
		},
		data(){
			return{
				touchStatus:false,
				starY:0,
				timer:null
			}
		},
		updated (){
				this.starY = this.$refs['A'][0].offsetTop
		},
		methods:{
			handleLetterClick(e){
				this.$emit('change',e.target.innerText)
			},
			handleLeTouchStart(){
					this.touchStatus = true
			},
			handleLetTouMove(e){
					if (this.touchStatus) {
						if(this.timer){
							clearTimeout(this.timer)
						}
						this.timer = setTimeout(() => {
							const touchY = e.touches[0].clientY - 79
							const index = Math.floor((touchY - this.starY) /20)
							if(index >= 0 && index < this.letters.length){
								this.$emit('change',this.letters[index])
							}
						},16)
						
						
						
					}
			},
			handleLeTouchEnd(){
					this.touchStatus = false
			}

		}
	}
</script>

<style lang="stylus" scoped>
	@import	'../../../assets/varibles.styl'
	.list
		display:flex
		flex-direction:column
		justify-content:center
		position:absolute
		top:1.58rem
		right:0
		bottom:0
		width:.4rem
		.item
			text-align:center
			line-height:.4rem
			color:$bgColor
</style>